<template>
	<view class="bg-white shadow-blur radius margin-left margin-right margin-top margin-bottom">
		<view class="cu-item">
			<view @tap="clickItem" class="flex justify-start align-start padding-sm" style="flex-direction: column;width: 100%;">
				<view class="flex justify-start align-start" style="width: 100%;">
					<view class="flex justify-center align-center" style="flex-direction: column;">
						<image :src="topic.image" style="width: 144upx;height: 144upx;"></image>
					</view>
					<view class="flex justify-start align-start padding-left-sm" style="flex-direction: column;width: 100%;">
						<view class="flex justify-between align-center" style="width: 100%;">
							<text class="text-bold text-lg padding-right-sm">{{topic.title}}</text>
							<view v-if="chooseMode==true">
								<button @tap.stop="chooseTopicAction(topic)" :class="'cu-btn raduis '+themeColor" style="min-width: 120upx;">选择</button>
							</view>
						</view>
						<text class="text-df text-grey padding-top-sm">{{topic.introduce}}</text>
						<text v-if="showTopicId" class="text-grey padding-top-sm">
							话题编号:{{topic.topic_id}}
						</text>
					</view>
				</view>
				<view class="flex justify-between align-center" style="width: 100%;">
					<view class="flex justify-center align-center padding-left-sm padding-top-sm padding-right" style="width: 204upx;">
						<view v-if="topic.is_attention==1" @tap.stop="attentionAction" class="cu-tag line-grey radius sm">已关注</view>
						<button v-else @tap.stop="attentionAction" class="cu-btn radius bg-orange sm"><text class="cuIcon-add"></text>关注</button>
					</view>
					<view class="flex justify-start align-center padding-top padding-right-sm" style="width: 100%;">
						<view class="flex justify-start align-center">
							<text class="text-sm text-gray">{{topic.post_count}}讨论帖</text>
							<text class="text-sm text-gray padding-left">{{topic.read_count}}次浏览</text>
						</view>
						<view v-if="showStatus" class="padding-left-xl">
							<view class="cu-tag line-blue sm">
								{{topic.status}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"TopicItem",
		data() {
			return {
				themeColor:this.ThemeColor,
			};
		},
		props: {
			topic: {
				type: Object,
				default: {}
			},
			showStatus: {
				type: Boolean,
				default:false
			},
			// #ifdef MP-BAIDU
			chooseMode: {
				type: Boolean,
				default:false
			},
			showTopicId: {
				type: Boolean,
				default:false
			}
			// #endif
			// #ifndef MP-BAIDU
			chooseMode: {
				type: [Boolean,String],
				default:false
			},
			showTopicId: {
				type: [Boolean,String],
				default:false
			}
			// #endif
		},
		methods: {
			attentionAction() 
			{
				this.$emit('attention')
			},
			clickItem() 
			{
				this.$emit('click')
			},
			chooseTopicAction() {
				this.$emit('chooseTopicAction')
			},
			clickOwnerAction() 
			{
				this.$emit('clickOwner')
			}
		},
	}
</script>

<style>

</style>
